<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>华为商城-商品详情</title>
    <link rel=" icon" href="../images/logo/huawei.ico" />
    <link rel="stylesheet" href="../icon/font_index/iconfont.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/commodpage.css">

</head>

<body>
    <!-- 首页框架 -->
    <div class="react-root">
        <!-- ---------------------- -->
        <!-- 头部导航栏一 -->
        <div class="header-top-bg">
            <div class="header-top">
                <!-- 头部左导航 -->
                <div class="header-top-left">
                    <ul>
                        <li class="toindex"><a href="javascript:;">首页</a></li>
                        <li><a href="javascript:;">华为官网</a></li>
                        <li><a href="javascript:;">花粉俱乐部</a></li>
                        <li><a href="javascript:;">V码(优购码)</a></li>
                        <li><a href="javascript:;">企业购</a></li>
                        <li><a href="javascript:;">Select Region</a></li>
                        <li><a href="javascript:;">更多精彩</a></li>
                    </ul>
                </div>
                <!-- 头部右导航 -->
                <span class="header-top-right">
                    <div class="login-before">
                        <div class="toLogin sl">请登录</div>
                        <div class="toRegist padd">注册</div>
                    </div>
                    <span class="login-after">
                        <div class="welcome sl">岳贵超你好</div>
                        <div class="tuichu padd">退出</div>
                    </span>
                    <div>
                        <p>我的订单</p>
                    </div>
                    <div class="line">
                        <p>客服</p>
                        <ul>
                            <li style="width:48px;">服务中心</li>
                            <li>联系客服</li>
                        </ul>
                    </div>
                    <div class="line">
                        <p>网站导航</p>
                        <ul style="width:560px;" class="subnav">
                            <section>
                                <li>频道</li>
                                <li>华为专区</li>
                                <li>企业购</li>
                                <li>教育优惠</li>
                                <li>HarmonyOS</li>
                            </section>
                            <section>
                                <li>产品</li>
                                <li>手机</li>
                                <li>笔记本</li>
                                <li>平板</li>
                                <li>智能穿戴</li>
                                <li>智能家居</li>
                                <li>智慧屏</li>
                                <li>耳机音箱</li>
                                <li>热销配件</li>
                                <li>生态产品</li>
                                <li>增值服务</li>
                            </section>
                            <section>
                                <li>增值服务</li>
                                <li>以旧换新</li>
                                <li>补购保障</li>
                                <li>一口价换电池</li>
                                <li>音频延保</li>
                                <li>穿戴延保</li>
                                <li>智慧屏全质保</li>
                                <li>活动公告</li>
                            </section>
                        </ul>
                    </div>
                    <div class="line">
                        <p>手机版</p>
                        <ul>
                            <li><img src="../images/commodpage/app.jpg" /></li>
                            <li><img src="../images/commodpage/smallapp.jpg" /></li>
                        </ul>
                    </div>
                </span>
                <div class="shop-enter">
                    <div class="shoppinp-card">
                        <span class="iconfont icon-maijiagouwuche"></span>
                        <div style="font-size:12px;">&nbsp;&nbsp;购物车</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ---------------------- -->
        <!-- 头部导航栏二 -->
        <div class="header-buttom-bg">
            <div class="header1">
                <div class="header-buttom">
                    <h1><img src="../images/logo/logo_app.png"></h1>
                    <ul>
                        <li><a href="javascript:;">华为专区</a></li>
                        <li><a href="javascript:;">鸿蒙智联</a></li>
                        <li><a href="javascript:;">莫塞尔</a></li>
                        <li><a href="javascript:;">华为智选</a></li>
                        <li><a href="javascript:;">HarmonyOS</a></li>
                        <li><a href="javascript:;">特惠企采</a></li>
                        <li><a href="javascript:;">教育购</a></li>
                    </ul>
                    <div class="sousuo">
                        <span class="iconfont icon-fangdajing"></span>
                    </div>

                </div>
            </div>
            <div class="header-sousuo">
                <div class="put">
                    <div class="sou">
                        <svg viewBox="0 0 1024 1024" width="16" height="16">
                            <path
                                d="M921.3 874L738.1 690.8c51.3-62.6 82.1-142.5 82.1-229.6 0-200.1-162.8-363-363-363-200.1 0-363 162.8-363 363s162.8 363 363 363c87 0 167-30.8 229.6-82.1L870 925.3c7.1 7.1 16.4 10.6 25.7 10.6s18.6-3.5 25.7-10.6c14.1-14.2 14.1-37.2-0.1-51.3zM166.8 461.2c0-160.1 130.3-290.4 290.4-290.4s290.4 130.3 290.4 290.4-130.3 290.4-290.4 290.4-290.4-130.3-290.4-290.4z"
                                p-id="2837"></path>
                        </svg>
                    </div>
                    <input type="text" placeholder="搜索产品">
                    <div class="sou quxiao">
                        <svg width="16" height="16" viewBox="0 0 1024 1024">
                            <path
                                d="M843.869 180.131c12.497 12.497 12.497 32.758 0 45.255l-618.483 618.483c-12.497 12.497-32.758 12.497-45.255 0s-12.497-32.758 0-45.255l286.621-286.637-286.621-286.591c-12.497-12.497-12.497-32.758 0-45.255s32.758-12.497 45.255 0l286.614 286.599 286.614-286.599c12.497-12.497 32.758-12.497 45.255 0zM843.869 798.614c12.497 12.497 12.497 32.758 0 45.255s-32.758 12.497-45.255 0l-256.437-256.452 45.247-45.247 256.444 256.444z"
                                fill="#000"></path>
                        </svg>
                    </div>
                </div>
                <ul class="neirong">
                    <li>小米手机</li>
                    <li>小米手机</li>
                    <li>小米手机</li>
                    <li>小米手机</li>
                    <li>小米手机</li>
                </ul>
            </div>
        </div>
        <!-- ------------------ -->
        <!-- ------商品详情页 ----->
        <div class="shop-pro">
            <div class="pro-left">
                <div class="relative">
                    <div class="product-gallery-img">
                        <!-- <img src="../images/imagedata/00101-1.jpg"> -->
                        <div class="cloud-zoom"></div>
                    </div>
                    <!-- 此处后端传入背景图 -->
                    <div class="product-magnifier"></div>
                </div>
                <div class="product-gallery-nav">
                    <li class="active"><img src="../images/logo/logo_app.png"></li>
                    <li><img src="../images/logo/logo_app.png"></li>
                    <li><img src="../images/logo/logo_app.png"></li>
                    <li><img src="../images/logo/logo_app.png"></li>
                    <li><img src="../images/logo/logo_app.png"></li>
                </div>
            </div>
            <!-- 商品信息 -->
            <div class="pro-right">
                <!-- 商品名称 -->
                <div class="shop-name">正在加载中 ………</div>
                <!-- 商品价格等信息 -->
                <div class="pro-info">
                    <div class="pro-price">
                        <div class="jiage">&ensp;价&ensp;&ensp;&ensp;&ensp;格</div>
                        <span>￥</span>
                        <div class="shop-price">****</div>
                    </div>
                    <!-- 促销活动 -->
                    <div class="pro-chuxiao">
                        <div class="chuxiao">&ensp;促&ensp;&ensp;&ensp;&ensp;销</div>
                        <div class="chuxiao-info">
                            <div class="list">
                                <div class="chuxiao-info-left">以旧换新抵现</div>
                                <div class="chuxiao-info-right">以旧换新至高补贴1010元</div>
                            </div>
                            <div class="list">
                                <div class="chuxiao-info-left">整点赠礼</div>
                                <div class="chuxiao-info-right">整点下单限量赠专属透明保护壳，限0/10/12/18/20点整点，每个整点限量10个。</div>
                            </div>
                            <div class="list">
                                <div class="chuxiao-info-left">赠送积分</div>
                                <div class="chuxiao-info-right">赠送积分购买即赠商城积分，积分可抵现~</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 横线 -->
                <div class="lin-700x"></div>
                <!-- 商品编码 -->
                <div class="shop-bm">
                    <div class="zuo">商品编码</div>
                    <div id="shop-id">****</div>
                </div>
                <!-- 横线 -->
                <div class="lin-700x"></div>
                <div class="shop-same">
                    <div class="zuo-same">选择销售类型</div>
                    <div class="you-same active2">全款购买</div>
                </div>
                <!-- 手机颜色 -->
                <div class="shop-same shop-color">
                    <div class="zuo-same">选择颜色</div>
                    <div class="you-same active2  shop-col">
                        <img src="../images/logo/logo_app.png">
                        <div class="text">曜石黑</div>
                    </div>
                    <div class="you-same  shop-col">
                        <img src="../images/logo/logo_app.png">
                        <div class="text">晶钻白</div>
                    </div>
                    <div class="you-same  shop-col">
                        <img src="../images/logo/logo_app.png">
                        <div class="text">天青蓝</div>
                    </div>
                    <div class="you-same  shop-col">
                        <img src="../images/logo/logo_app.png">
                        <div class="text"> 鎏光金</div>
                    </div>
                    <div class="you-same  shop-col">
                        <img src="../images/logo/logo_app.png">
                        <div class="text"> 云锦白</div>
                    </div>
                </div>
                <!-- 手机版本 -->
                <div class="shop-same">
                    <div class="zuo-same">选择版本</div>
                    <div class="you-same active2">8GB+256GB</div>
                    <div class="you-same">12GB+512GB</div>
                    <div class="you-same">8GB+512GB</div>
                </div>
                <!-- 网络型号 -->
                <div class="shop-same">
                    <div class="zuo-same">选择网络制式</div>
                    <div class="you-same active2">4G 全网通</div>
                    <div class="you-same">5G 全网通</div>
                </div>
                <!-- 手机套餐 -->
                <div class="shop-same">
                    <div class="zuo-same">选择套餐</div>
                    <div class="you-same active2">官方标配</div>
                </div>
                <!-- 服务保障 -->
                <div class="shop-same">
                    <div class="zuo-same">保障服务</div>
                    <div class="you-same">保障服务碎屏宝（宝盒版） ￥1199</div>
                    <div class="you-same">华为延长服务宝（一年期） ￥568</div>
                </div>
                <!-- 横线 -->
                <div class="lin-700x"></div>
                <!-- 添加购物车功能 -->
                <div class="function">
                    <div class="number">
                        <div id="num">1</div>
                        <section>
                            <div id="addnum" class="ygc">+</div>
                            <div id="minnum" class="ygc">-</div>
                        </section>
                    </div>
                    <div class="addcart">加入购物车</div>
                </div>
            </div>
        </div>
        <!-- --------加入购物车弹窗----->
        <div class="towhere">
            <div class="tishi">
                <img width="30px" src="../images/counter/success_icon.png">
                <span class="shopname">****</span><span>成功加入购物车</span>
            </div>
            <div class="tiaozhuan">
                <div class="btn addcart">再逛逛</div>
                <div class="btn ordernow">去结算</div>
            </div>
        </div>
        <!-- ----------------------- -->
        <div class="xinxi">
            <p class="active">商品详情</p>
            <p>规格参数</p>
            <p>包装与售后</p>
            <p>用户评价(3400+)</p>
        </div>
        <!-- ---背景宣传图片---- -->
        <div class="shop-data">
            <img src="../images/logo/logo_app.png">
            <img src="../images/logo/logo_app.png">
            <img src="../images/logo/logo_app.png">
            <img src="../images/logo/logo_app.png">
        </div>
        <!-- -------商品评论---------- -->
        <div class="view-bg">
            <div class="shopview">
                <div>您好，小艺为你服务！请简单发表您的评论</div>
                <textarea id="content"></textarea>
                <section class="fasong">发表评论</section>
            </div>
            <div class="viewcontent">
                <!-- <ul>
                    <li>
                        <div><span>用户名：</span>
                            <p class="vipname">岳贵超</p>
                        </div>
                        <div><span>评论内容：</span>
                            <p class="content">哈哈哈哈哈</p>
                        </div>
                    </li>
                    <li><div><span>发表于：</span>
                        <p class="time">2018/03/03</p></div>
                    </li>
                </ul> -->
            </div>
        </div>
    </div>


    <!-- ---------------------- -->
    <!-- 商品服务 -->
    <div class="pro-serve-bg">
        <div class="pro-serve">
            <div class="serve-cont">
                <img width="24" height="24" src="../images/index/proserve1.png">
                <div class="text">&nbsp;&nbsp;百强企业品质保证</div>
            </div>
            <div class="serve-cont">
                <img width="24" height="24" src="../images/index/proserve2.png">
                <div class="text">&nbsp;&nbsp;7天退货 15天换货</div>
            </div>
            <div class="serve-cont">
                <img width="24" height="24" src="../images/index/proserve3.png">
                <div class="text">&nbsp;&nbsp;48元起免运费</div>
            </div>
            <div class="serve-cont">
                <img width="24" height="24" src="../images/index/proserve4.png">
                <div class="text">&nbsp;&nbsp;2000家服务店 全国联保</div>
            </div>
        </div>
    </div>

    <!-- ---------------------- -->
    <!-- 底部导航信息 -->
    <div class="footer-bg">
        <div class="footer-nav">
            <div class="left-nav">
                <dl>
                    <dt>购物指南</dt>
                    <dd>免息分期</dd>
                    <dd>以旧换新</dd>
                    <dd>众测活动</dd>
                    <dd>企业购</dd>
                    <dd>O2O采购</dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd>门店维修</dd>
                    <dd>保修政策</dd>
                    <dd>防伪查询</dd>
                    <dd>退换贷政策</dd>
                    <dd>手机寄修服务</dd>
                    <dd>维修备件价格查询</dd>
                </dl>
                <dl>
                    <dt>维修与技术支持</dt>
                    <dd>服务店</dd>
                    <dd>预约维修</dd>
                    <dd>手机寄修</dd>
                    <dd>备件价格查询</dd>
                    <dd>上门服务</dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd>防伪查询</dd>
                    <dd>补购保障</dd>
                    <dd>以旧换新</dd>
                    <dd>礼品包装</dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd>公司介绍</dd>
                    <dd>华为委售店</dd>
                    <dd>商家中心</dd>
                    <dd>意见反馈</dd>
                </dl>
                <dl>
                    <dt>友情链接&nbsp;></dt>
                    <dd>华为集团</dd>
                    <dd>华为CBG官网</dd>
                    <dd>花粉俱乐部</dd>
                    <dd>华为云</dd>
                    <dd>华为应用市场</dd>
                </dl>
            </div>
            <div class="line-y"></div>
            <div class="right-phone">
                <div class="phone">
                    <div class="phone-num">950805</div>
                    <div class="phone-txt">7 x 24小时客服热线(仅收市话费)
                    </div>
                </div>
                <div class="kefu">
                    <div class="box-phone">
                        <span class="iconfont icon-zaixiankefu"></span>
                        <div style="margin-left: 7px;">在线客服</div>
                    </div>
                </div>
                <div class="VMALL">
                    <h2 style="font-size: 13px;">关注VMALL:</h2>
                    <span style="font-size: 24px;" class="iconfont icon-weixin"></span>
                    <span style="font-size: 18px;" class="iconfont icon-toutiaoyangshi"></span>
                    <span style="font-size: 24px;" class="iconfont icon-weibo"></span>
                    <span style="font-size: 18px;" class="iconfont icon-baidu"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- ---------------------- -->
    <!-- 底部版权 -->
    <div class="copyright-bg">
        <div class="copyright">
            <div class="copy-content">
                <div class="left">
                    <img width="82" height="20" src="../images/logo/logo_min.png">
                </div>
                <div class="center">
                    <div class="cen-1">
                        华为集团&nbsp;|&nbsp;华为CBG官网&nbsp;|&nbsp;花粉俱乐部&nbsp;|&nbsp;华为应用市场&nbsp;|&nbsp;HarmonyOS&nbsp;|&nbsp;华为终端云空间&nbsp;|&nbsp;开发者联盟&nbsp;|&nbsp;
                        华为商城手机版
                    </div>
                    <div class="cen-2">
                        <p>隐私声明服务协议COOKIES
                            Copyright◎2012-2022华为终端有限公司版权所有&nbsp;|&nbsp;经营资质&nbsp;|&nbsp;粤ICP备19015064号1粤公网安备44190002003939号
                        </p>
                        <p>增值电信业务经营许可证:粤B2-201907621 备案 主体编号: 442019190721821 粵新出网备 (2021) 2号1(粵)网械平台备字[2022]第00005号
                        </p>
                        <p>互联网药品信息服务资格证(粤) -非经营性: 2020-0102 &nbsp;|&nbsp;
                            粤东食药监械经营备20203930&nbsp;|&nbsp;广东省网络食品交易第三方平台备案: GDWS10168</p>
                    </div>
                </div>
                <div class="right"><img width="90" height="32" src="../images/index/yingyezhizhao.png"></div>
            </div>
        </div>
    </div>

    <!-- 侧边栏导航 -->
    <aside>
        <div class="aside shoppinp-card">
            <span class="iconfont icon-maijiagouwuche"></span>
            <h2>购物车</h2>
        </div>
        <div class="aside">
            <span class="iconfont icon-zaixiankefu"></span>
            <h2>在线客服</h2>
        </div>
        <div class="aside">
            <span class="iconfont icon-fuwu"></span>
            <h2>自助服务</h2>
        </div>
        <div class="aside backtop">
            <span class="iconfont icon-fanhuidingbu"></span>
            <h2>返回顶部</h2>
        </div>
    </aside>
    </div>
</body>

</html>
<script src="../js/jquery.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/commodpage.js"></script>